<template>
  <div style="margin: 0">
    <el-container style="height: 752px;border: 1px solid #eee">
      <el-aside width="auto">
        <el-menu :default-active="defaultactive" class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen"
                 @close="handleClose"
                 :collapse="isCollapse"
                 background-color="#304156"
                 :router="true"
        >
          <el-submenu :index="item.path" v-for="item in routers" :key="item.name">
            <template slot="title">
              <span slot="title" style="color: #BFCBD9">{{ item.name }}</span>
            </template>

            <!--          <el-menu-item :index="val.name" v-for="val in item.son" :key="val.name" :class="[isActive ? yuanClass : '']" >-->
            <el-menu-item :index="val.path" v-for="val in item.son" :key="val.name"
                          :class="[isActive ? yuanClass : '']" >
              {{ val.name }}
            </el-menu-item>

          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-row>
            <el-col :span="6">
              <div style="float: left; margin-top: 8px; display: block">
                <el-button style="border: 0px;background: white" :style="{ display: i1 }" @click="i1click()">
                  <i class="el-icon-s-fold" style="font-size: 25px; color: black"></i>
                </el-button>
                <el-button style="border: 0px;background: white" :style="{ display: i2 }" @click="i2click()">
                  <i class="el-icon-s-unfold" style="font-size: 25px; color: black"></i>
                </el-button>
              </div>
              <div style="display: block; padding-top: 24px">
                <el-breadcrumb separator="/" v-if="bcparent!=''">
                  <el-breadcrumb-item><span style="font-size: 18px">{{ bcparent }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item><span style="font-size: 18px">{{ bcson }}</span></el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
            <el-col :span="6" :offset="11">

              <div class="demo-basic--circle">
                <div class="block">
                  <el-popover
                    placement="bottom"
                    title="标题"
                    width="200"
                    trigger="click"
                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <!--                  <el-button >-->

                    <el-avatar slot="reference" shape="square" style="margin-top: 8px" :size="45"
                               src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"></el-avatar>
                    <!--                  </el-button>-->
                  </el-popover>

                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>

        <el-main>
          <div>
            <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="changeMenu">
              <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
              >
                <!--                {{ item.content }}-->
                <router-view :name="item.content"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "DashBoard",
  data() {
    return {
      //用户id
      sid:'',
      // 左侧导航栏相关数据----start
      contentStyleObj: {
        height: ''
      },
      defaultactive: '',
      isCollapse: false,
      i1: '',
      i2: 'none',
      isActive: true,
      yuanClass: 'yuan',
      // 面包屑的值
      bcparent: "",
      bcson: "",
      routers: [
        // {
        //   'name': '常用功能',
        //   'path': "/index/CourseOrder",
        //   'son': [
        //     {
        //       'name': '课程订单',
        //       'path': "/CourseOrder",
        //     }
        //   ]
        // },
        // {
        //   'name': '课程管理',
        //   'path': "/index/Course",
        //   'son': [
        //     {
        //       'name': '课程列表',
        //       'path': "/Courses",
        //     },
        //     {
        //       'name': '课程分类',
        //       'path': "/Classify",
        //     },
        //     {
        //       'name': '课程审核',
        //       'path': "/Audit",
        //     }
        //   ]
        // },
        // {
        //   'name': '首页管理',
        //   'path': "/index/home",
        //   'son': [
        //     {
        //       'name': '头部导航',
        //       'path': "/head",
        //     }, {
        //       'name': '专区管理',
        //       'path': "/zone",
        //     }, {
        //       'name': '轮播管理',
        //       'path': "/carousel",
        //     }, {
        //       'name': '底部文章',
        //       'path': "/bottom",
        //     }, {
        //       'name': '友情链接',
        //       'path': "/link",
        //     }
        //   ]
        // },
        // {
        //   'name': '讲师管理',
        //   'path': "/index/lecturer",
        //   'son': [
        //     {
        //       'name': '讲师列表',
        //       'path': "/lecturer",
        //     }, {
        //       'name': '讲师审核',
        //       'path': "/audit",
        //     }, {
        //       'name': '分润列表',
        //       'path': "/profit",
        //     }
        //   ]
        // },
        // {
        //   'name': '权限管理',
        //   'path': "/index/power",
        //   'son': [
        //     {
        //       'name': '用户管理',
        //       'path': "/userment",
        //     }, {
        //       'name': '角色管理',
        //       'path': "/roles",
        //     }, {
        //       'name': '菜单管理',
        //       'path': "/meun",
        //     }
        //   ]
        // },
      ],
      // 左侧导航栏相关数据----end

      //标签页相关数据----start
      editableTabsValue: '1',
      editableTabs: [],
      tabIndex: 2
    };
  },
  methods: {
    // 左侧导航栏相关数据----start
    getHeight() {
      this.contentStyleObj.height = window.innerHeight + 'px';
    },
    handleOpen(key, keyPath) {

    },
    handleClose(key, keyPath) {

    },
    i1click() {
      this.i2 = '';
      this.i1 = 'none';
      this.isCollapse = true;
    },
    i2click() {
      this.i1 = '';
      this.i2 = 'none';
      this.isCollapse = false;
    },
    // 左侧导航栏相关方法----end

    //标签页相关方法
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              this.changeMenu(nextTab, null);
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.showBreadcrumbs(activeName);
      // 判断横向菜单栏是否为主页 是主页不删除 面包屑消失
      if (this.editableTabs.length === 1 && this.editableTabs[0].name !== "1") {
        this.bcparent = "";
        this.bcson = "";
      } else {
        this.showBreadcrumbs(activeName);
      }
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      /**
       * 删除完最后一个 将首页添加上
       */
      if (this.editableTabs.length === 0) {
        this.editableTabs = [
          {
            title: 'Tab 1',
            name: '1',
            content: 'Tab 1 content'
          }
        ]
      }
    },
    /**
     *  右侧横向菜单栏被选中时
     * @param key
     * @param keyPath
     */
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      alert(key+"====="+keyPath)
      let target = this.showBreadcrumbs(key);
      console.log(this.editableTabs);
      let status = 0;
      this.editableTabs.some(item => {
        if (item.name == key) {
          this.editableTabsValue = key;
          status = 1;
          return true;
        }
      });
      console.log(status);
      if (status == 0) {
        this.editableTabsValue = key;
        let t1 = new Object();
        t1.title = target;
        t1.name = key;
        this.editableTabs.push(t1);
      }

    },
    /**
     * 展示面包屑
     * @param tab
     * @param event
     */
    showBreadcrumbs(value) {
      console.log("---" + value);
      let bcparent = "";
      let bcson = "";
      // let tabtarget = "";
      this.routers.some(function (item, idx) {
        console.log(JSON.stringify(item) + "---" + idx);
        item.son.some(function (elem, index) {
          console.log(JSON.stringify(elem) + "---" + index);
          // 将路径存放到  this.editableTabs 中
          if (elem.path == value) {
            bcparent = item.name;
            bcson = elem.name;
            return true;
          }
        })
        if (bcparent !== "") {
          return true;
        }
      });
      this.bcparent = bcparent;
      this.bcson = bcson;
      console.log(this.bcparent + "--------" + this.bcson);
      return bcson;
    },
    changeMenu(tab, event) {
      this.showBreadcrumbs(tab.name);
      console.log("------------change-------------")
      console.log(tab.name, event);
      console.log("------------change-------------")
      if (this.defaultactive !== tab.name) {
        this.defaultactive = tab.name;
        if (this.defaultactive !== "1") {
          this.$router.push({
            path: this.defaultactive
          });
        }
      } else {
        this.defaultactive = tab.name;
      }
    },
  },
  created() {
    let item = sessionStorage.getItem("sid");
    this.sid=item;
    this.$axios.get("education-system-roles/demo/t-staff/findthismenu/"+item).then(r=>{
      alert(JSON.stringify(r.data))
      this.routers=r.data;
    })
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight)
  },
}
</script>

<style>
html, body {
  height: 100%;
  margin: 0;
}

/*左侧导航栏相关样式----start*/
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}

.el-menu-vertical-demo {
  width: 50px;
  min-height: 100%;
}

.el-submenu__title {
  color: #BFCBD9;
}

.el-menu-item {
  color: #BFCBD9;
}

.yuan {
  width: 100px;
  height: 50px;
  background-color: #1F2D3D !important;
}

.el-menu-item:hover {
  background-color: #001528 !important;
}

.el-menu-item.is-active {
  color: #409EFF;
}

.el-button + .el-button {
  margin-left: 0;
}
</style>
